<!Doctype html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css" media="screen">
    button {
        width: 120px;
        height: 50px;
        display: inline-block;
        font-weight: 400;
        text-align: center;
        cursor: pointer;
        background-image: none;
        border: 1px solid transparent;
        white-space: nowrap;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 1.42857143;
        border-radius: 4px;
    }
    .smallbtn {
        width: 80px;
    }
    button:hover {
        background-color: #e7e4e4;
    }
    input {
        height: 48px;
        width: 80px;
        font-size: 26px;
        color: black;
        border-radius: 3px;
        border: none;
        background-color: #CCCCCC;
        padding-left: 6px;
        outline: none;
        vertical-align: bottom;
    }
    #isneed {
        width: 20px;
        vertical-align: middle;
        display: inline-block;
        background-color: white;
    }
    .otherfun {
        margin: 10px auto;
    }
    #inputarea {
        width: 800px;
        height: 100px;
        font-size: 25px;
        margin-bottom: 10px;
    }
    #outputarea {
        width: 800px;
        height: 260px;
        font-size: 18px;
    }
    </style>
</head>

<body>
    <center>
        <h1>字符串转换</h1>
        <textarea id="inputarea" class="autoselect" autofocus="autofocus" placeholder="待转换的字符串...."></textarea>
        <br>
        <span>正则全局替换:从字符:</span>
        <input type="text" id="from" value="[\\]" class="autoselect">
        <span>替换为字符:</span>
        <input type="text" id="to" value="/" class="autoselect">
        <button type="button" class="smallbtn" onclick="RegReplace()">替换</button>
        <br>
        <div class="otherfun">
            <button type="button" onclick="ChangePath('/')">转换为 / 路径</button>
            <button type="button" onclick="ChangePath('\\\\')">转换为 \\ 路径</button>
            <button type="button" onclick="ReplaceOneLine()">折叠为一行</button>
            <button type="button" onclick="ReplaceLineNu()">去代码行号</button>
            <button type="button" class="smallbtn" onclick="getLen()">长度</button>
            <button type="button" class="smallbtn" onclick="EmptyAll()">清空</button>
            <input type="checkbox" id="isneed" onChange="MarkChange()">路径转换去引号
        </div>
        <textarea id="outputarea" class="autoselect" placeholder="转换后的字符串...."></textarea>
    </center>

    <script>
    window.onload = function() {
        //记录/显示 路径转换是否去引号
        if (localStorage["quotation_mark"] == null || localStorage["quotation_mark"] == 1) {
            $("isneed").checked = true;
        }
        else {
            localStorage["quotation_mark"] = 0;
            $("isneed").checked = false;
        }

        //  聚焦 全选
        var autoselect = document.getElementsByClassName("autoselect");
        for (var i = 0; i < autoselect.length; i++) {
            autoselect[i].onfocus = function() {
                that = this;
                setTimeout(function() {
                    that.select();
                }, 30);
            }
        }

    }

    //正则全局替换
    String.prototype.replaceAll = function(reallyDo, replaceWith, ignoreCase) {
        if (!RegExp.prototype.isPrototypeOf(reallyDo)) {
            return this.replace(new RegExp(reallyDo, (ignoreCase ? "gi" : "g")), replaceWith);
        }
        else {
            return this.replace(reallyDo, replaceWith);
        }
    }

    function ReplaceOneLine() {
        $("outputarea").value = $("inputarea").value.replace(/[\n\r]/g, "");
        SelectTextById('outputarea');
    }

    function MarkChange() {
        localStorage["quotation_mark"] = Math.abs(localStorage["quotation_mark"] - 1);
    }

    document.onkeydown = function(event) {
        var e = event || window.event
        if (e && e.keyCode == 13) {
            ChangePath("/");
        }
    };

    //document.getElementById
    function $(id) {
        return document.getElementById(id);
    }

    function RegReplace() {
        var change = $("from").value;
        var changeto = $("to").value;
        $("outputarea").value = $("inputarea").value.replaceAll(change, changeto, 1);
        SelectTextById("outputarea");
    }

    function ChangePath(resultstr) {
        var temp = $("inputarea").value.replace(/[\\]/g, resultstr);

        if ($("isneed").checked) {
            temp = temp.replace(/[\"]/g, "");
        }

        $("outputarea").value = temp;
        SelectTextById("outputarea");
    }

    function ReplaceLineNu() {
        $("outputarea").value = $("inputarea").value.replace(/^\s*\d+/gm, "");
        SelectTextById('outputarea');
    }

    function getLen() {
        $("outputarea").value = $("inputarea").value.length;
        SelectTextById("outputarea");
    }

    function EmptyAll() {
        $("inputarea").value = "";
        $("outputarea").value = "";
        $("from").value = "[\\\\]";
        $("to").value = "/";
        SelectTextById("inputarea");
    }

    function SelectTextById(id) {
        setTimeout(function() {
            document.getElementById(id).select();
        }, 30);
    }
    </script>
</body>

</html>
